@import '@/lib/reset.scss';



.Home_nav {
  @include rect(130px, auto);
  float: left;
  margin-top: 40px;
  position: relative;

  .Home_nav_M {
    position: relative;
    &:hover {
      .Home_nav_meat {
        display: block;
       
      }
    }
  }
  .Home_nav_V {
    position: relative;

    &:hover {
      .Home_nav_Vegetables {
        display: block;
      }
    }
  }

  .Home_nav_fl {
    font-size: 16px;
    // color: #222;
    margin-top: 26px;
    display: inline-block;
    margin-bottom: 10px;
    padding-left: 10px;
    a {
      color: #E33915;
    }
  }

  ul {
    margin-top: 2px;
    border-bottom: 1px solid #ccc;


    li {
      @include rect(100%, 26px);
      display: inline-block;
      line-height: 26px;
      margin-bottom: 16px;
      font-size: 14px;

      p {
        float: left;
      }

      span {
        margin-left: 23px;
        color: #222;

        &:hover {
          color: #DD3915;
          cursor: pointer;
        }

      }

      b {
        display: block;
        width: 12px;
        height: 12px;
        // background: #222;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        transform: rotate(45deg);
        float: right;
        margin-top: 8px;
        margin-right: 15px;
        // color: black;

      }
    }


    &:nth-child(2) {
      border-bottom: 0px;
      margin-top: 15px;
    }
  }

  .icon-chushimao1 {
    font-size: 28px;
    color: #D0D1D1;
  }

  .icon-shijian1 {
    font-size: 28px;
    color: #D9DBD9;
  }

  .icon-pisa {
    font-size: 20px;
    color: #D9DBD9;
  }

  .icon-taiyang-copy {
    font-size: 28px;
    color: #F3DD6F;
  }

  .icon-Shape {
    font-size: 20px;
    color: #C08979;
  }

  .icon-yu {
    font-size: 28px;
    color: #D4B890;
  }

  .icon-shucai_huabanfuben {
    font-size: 28px;
    color: #905F7C;
  }

  .icon-jidan1 {
    font-size: 28px;
    color: #D4B890;
  }

  .icon-rice {
    font-size: 24px;
    color: #D9DBD9;
  }

  .icon-pisa {
    font-size: 28px;
    color: #D5B992;
  }

  .icon-rice {
    font-size: 20px;
    color: #E0E1E0;
  }

  .icon-miantiao {
    font-size: 28px;
    color: #D9DBD9;
  }

  .icon-xiaomai {
    font-size: 28px;
    color: #D4B890;
  }

  .icon-rice {
    font-size: 28px;
    color: #EDB6BC;
  }

  .icon-miantiao {
    font-size: 28px;
    color: #6E3C2F;
  }

  .icon-xiaomai {
    font-size: 28px;
    color: #EC7576;
  }

  .icon-xiaomai {
    font-size: 28px;
    color: #FFDEC6;
  }

  .Nav_erweima {
    @include rect(118px, 598px);
    // @include border(1px, #fbfbfb, solid);
    // p {
    //   color: red;
    // }
    // em {
    //   background: url('./../../img/erweima.jpg');
    //   @include rect(90px, 90px);
    // }
    // b {

    // }
    span {
      @include rect(100%, 100%);
      background: url('./../../img/xin.png');
      display: inline-block;
    }
  }

  .Home_nav_meat {
    @include rect(400px, 400px);
    background: #f6f6f6;
    position: absolute;
    left: 130px;
    top: -20px;
    z-index: 20;
    display: none;

    .nav_meat_A {
      @include rect(400px, 100px);
      display: flex;
      border-bottom: 1px solid #ccc;

      ul {
        margin-left: 30px;
        margin-top: 30px;
        color: #222;

        li {
          text-align: left;
          width: auto;
          @include rect(70px, 20px);
          a{
            color: #222;
          }
          &:hover {
            a{
              color: #DD3915;
            }
          }
        }
      }

      .nav_meat_H {
        @include rect(70px, 70px);
        // border: 1px solid red;
        display: block;
        margin-top: 30px;
      }
    }

  }

  .Home_nav_Vegetables {
    @include rect(400px, 400px);
    background: #eee;
    position: absolute;
    left: 130px;
    top: -20px;
    z-index: 20;
    display: none;
    .nav_meat_A {
      @include rect(400px, 100px);
      display: flex;
      border-bottom: 1px solid #ccc;

      ul {
        margin-left: 20px;
        margin-top: 30px;
        color: #222;

        li {
          text-align: left;
          width: auto;
          @include rect(70px, 20px);
          a{
            color: #222;
          }
          &:hover{
            a{
              color: #dd3915;
            }
          }
        }
      }

      .nav_meat_S {
        @include rect(150px, 70px);
        // border: 1px solid red;
        text-align: center;
        display: block;
        margin-top: 30px;
      }
    }
  }
}

.Home_content {
  @include rect(490px, auto);
  // @include border(1px, red, solid);
  margin-left: 40px;
  float: left;
  margin-top: 40px;

  .Home_slideshow {
    .ant-carousel .slick-slide {
      text-align: center;
      height: 260px;
      line-height: 260px;
      background: #364d79;
      overflow: hidden;
    }

    .ant-carousel .slick-slide h3 {
      color: #fff;
    }

    img {
      @include rect(100%, 100%);
    }
  }

  .Home_recipes {
    @include rect(100%, 180px);
    // @include border(1px, yellow, solid);
    margin: 36px 0;

    .Home_recipes_nav {
      @include rect(100%, 30px);
      float: left;
      line-height: 30px;
      margin: 15px 0;

      b {
        font-size: 20px;
        float: left;
        color: #c2b18b;

      }

      .recipes_all {
        float: left;
        color: #dd3915;
        margin-left: 16px;
        margin-top: 4px;
      }

      .icon {
        @include rect(65px, 28px);
        float: right;
        display: flex;
        justify-content: space-between;

        .iconfont {
          font-size: 16px;
          font-weight: 100;
          background: #f5f6f5;
          @include rect(28px, 28px);
          line-height: 28px;
          text-align: center;
          color: #222;
          display: block;
          // font-weight: 10;
          z-index: 3
        }

        .icon-icon_arrow_right {
          margin-left: 10px;
          font-size: 16.5px;
        }
      }
    }



    .Home_recipes_photo {
      @include rect(490px, 134px);
      position: relative;
      display: flex;
      overflow: hidden;

      ._Recipes_ul {
        position: absolute;
        left: 0;
        @include rect(2000px, 134px);
        li {
          @include rect(147px, 134px);
          float: left;
          margin-right: 24px;
          .bannerImg {
            @include rect(147px, 90px);
            border: 1px solid #f3f3f3;
            img {
              @include rect(100%, 100%);
            }
            &:hover {
              opacity: .7;
              cursor: pointer;
            }
          }
          .Recipe_spand {
            font-size: 14px;
            color: #222;
            text-align: center;
            margin: 7px 0;
            &:hover {
              color: #dd3915;
            }
          }
        }
      }


    }
  }

  .Home_Popular {
    @include rect(100%, 1504px);
    overflow: hidden;
    // @include border(1px, red, solid);
    .Home_Popular_nav {
      @include rect(100%, 30px);
      margin: 15px 0;
      b {
        font-size: 20px;
        float: left;
        color: #c2b18b;
        margin: 0;
      }

      span {
        float: left;
        color: #dd3915;
        margin-left: 16px;
        display: block;
        margin-top: 4px;
      }
    }
    ._Popular_ul {
      @include rect(510px, 1464px);
      // @include border(1px, red, solid);
      // float: left;
      justify-content: space-between;
      li {
        display: block;
        float: left;
        @include rect(235px, 220px);
        margin-bottom: 25px;
        // @include border(1px, #ccc, solid);
        margin-right: 20px;
        cursor: pointer;
        .popImg {
          @include rect(235px, 138px);
          border: 1px solid #f3f3f3;
          
          img {
            @include rect(100%, 100%);
           
          }
          &:hover {
            opacity: .8;
            cursor: pointer;
          }
        }
        p {
          @include rect(235px, 32px);
          color: #222;
          font-size: 18px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 18px;

          &:hover {
            color: #dd3915;
          }
        }
        .spand {
          @include rect(235px, 21px);
          text-align: center;
          // display: inline-block;
          color: #aaa;

          span {
            margin-right: 10px;
            font-size: 12px;
          }

          span:nth-of-type(1) {
            font-size: 12px;
            color: #222;

            &:hover {
              color: #dd3915;
            }
          }
        }
      }

    }

    .Home_Popular_photo {
      margin-left: 20px;
    }
  }

  .Home_Foot {
    @include rect(490px, 270px);
    margin-top: 10px;
    // @include border(1px, red, solid);
    .Home_Foot_nav {
      @include rect(100%, 30px);
      margin-bottom: 15px;

      h1 {
        font-size: 20px;
        float: left;
        color: #c2b18b;
        margin: 0;
      }

      span {
        float: left;
        color: #f0b5af;
        margin-left: 16px;
        display: block;
        margin-top: 4px;
      }
    }

    ul {
      @include rect(498px, 230px);
      padding: 20px;
      background: #F5F6F5;

      li {
        @include rect(60px, 86px);
        // @include border(1px, red, solid);
        margin: 8px 8px;
        float: left;
        background: #fff;

        img {
          @include rect(60px, 60px);
        }

        p {
          @include rect(60px, 18px);
          text-align: center;
          margin-top: 5px;
          font-size: 12px;
          color: #222;
          overflow: hidden;
        }
      }
    }
  }
}

.Home_Rightsidebar {
  @include rect(300px, auto);
  // @include border(1px, red, solid);
  float: right;
  margin: 0px;
  margin-top: 40px;

  .Home_Rightsidebar_Login {
    @include rect(300px, 260px);
    background: #F5F6F5;
    // background: #ccc;
    .Rightsidebar_NoLogin {
      display: block;
      @include rect(320px, 200px);
      padding-top: 50px;
      margin-bottom: 20px;
      ul {
        @include rect(300px, 90px);
        text-align: center;
        .iconfont {
          padding-right: 10px;
        }
        li {
          @include rect(300px, 40px);
          margin-bottom: 8px;
          line-height: 40px;
          a {
            @include rect(150px, 40px);
            background: #DD3915;
            display: block;
            margin-left: 75px;
            color: #fff;
            font-size: 15px;
          }
        }
      }
      .Rightsidebar_NoLogin_phone {
        @include rect(190px, 20px);
        text-align: center;
        margin-left: 53px;
        margin-top: 5px;
        
        a {
          margin-top: 10px;
          color: #DD3915;
          margin: 0 10px;
        }

        span {
          color: black;
          font-size: 18px;
        }
      }
    }
    .Rightsidebar_LoginTop {
      display: none;
      .Rightsidebar_Login {
        @include rect(300px, 230px);
        @include flexbox();
        flex-direction: column;
        align-items: center;
        padding: 30px 5px 5px;
        img {
          @include rect(60px, 60px);
          display: inline-block;
          border-radius: 50%;
          &:hover{
            cursor: pointer;
          }
        }
        h3 {
          padding: 16px 25px 5px;
          font-weight: 500;
          a {
            font-size: 18px;
            color: #dd3915;
            padding: 2px;
            &:hover{
              color: #fff;
              background: #dd3915;
            }
          }
        }
        .Login_list {
          li {
            float: left;
            padding-left: 6px;
            height: 12px;
            line-height: 12px;
            border-left: 1px solid rgb(24, 23, 23);
            a {
              padding-right: 6px;
              font-size: 12px;
              color: #222;
            }
          }
          li:nth-of-type(1) {
            border: none;
          }
        }
        button {
          @include rect(105px, 45px);
          border: none;
          background: #dd3915;
         
          margin-top: 20px;
          a {
            color: #fff;
          }
        }
      }
    }
    .Rightsidebar_Login_Report {
      @include rect(300px, 20px);
      text-align: center;
      line-height: 20px;
      a {
        color: #DD3915
      }
    }
  }

  .Home_Rightsidebar_Popular {
    h1 {
      @include rect(300px, 30px);
      font-size: 20px;
      float: left;
      color: #c2b18b;
      margin: 0;
      font-weight: 700;
      line-height: 30px;
      margin-top: 15px;
    }

    ul {
      @include rect(150px, 155px);
      float: left;
      font-size: 14px;
      margin-top: 5px;
      .Home_Rightsidebar_Popular_zh {
        span {
          margin-left: 8px;
        }

        // font-size: 20px;
      }

      li {
        @include rect(150px, 28px);
        display: flex;

        p {
          font-size: 16px;
        }

        span {
          color: black;
          margin-left: 17px;
          font-size: 16px;
        }

      }
    }
  }
}

.Home_Menu {
  @include rect(300px, 900px);
  overflow: hidden;

  .Home_Menu_nav {
    @include rect(100%, 30px);
    margin: 10px 0;
    b {
      font-size: 20px;
      float: left;
      color: #c2b18b;
      margin: 0;
      display: block;
    }
    .Menu_all {
      float: left;
      color: #dd3915;
      margin-left: 16px;
      display: block;
      margin-top: 4px;
    }
  }

  .Home_Menu_photo {
    @include rect(300px, auto);

    ._Menu_ul {
      @include rect(300px, auto);
      li {
        @include rect(300px, 240px);
        
        margin-bottom: 16px;
        text-align: center;
        img {
          @include rect(280px, 190px);
        }
        .Recipe_spand {
          border: 1px solid #f3f3f3;
          @include rect(280px, 46px);
          line-height: 46px;
          text-align: center;
          font-size: 16px;
          margin-left: 9px;
          span {
            color: #222;
          }
        }
        &:hover{
          opacity: .8;
          cursor: pointer;
          span {
            color: #dd3915;
          }
        }
      }
    }
  }
}

.Follow_Menu {
  @include rect(300px, 750px);
  overflow: hidden;

  .Follow_Menu_nav {
    @include rect(100%, 30px);
    margin: 15px 0;

    b {
      font-size: 20px;
      float: left;
      color: #c2b18b;
      margin: 0;
      display: block;
    }

    .Follow_all {
      float: left;
      color: #dd3915;
      margin-left: 16px;
      display: block;
      margin-top: 4px;
    }
  }

  .Follow_Menu_photo {
    @include rect(300px, 640px);

    li {
      @include rect(300px, 80px);
      border-bottom: 1px solid #ccc;
      margin-bottom: 16px;
      margin-top: 16px;

      ._Menu_ul_li {
        display: flex;

        img {
          @include rect(60px, 60px);
          border-radius: 50%;

        }

        .Follow_Menu_detail {
          @include rect(125px, 60px);
          margin-left: 27px;

          a {
            color: black;
            float: left;
            @include rect(125px, auto);
          }

          span {
            float: left;
            @include rect(125px, 20px);
            line-height: 20px;
            color: #909090;
            font-size: 12px;
            font-weight: 540;
          }
        }

        .Follow_Menu_det {
          @include rect(86px, 40px);
          background: #DD3915;
          color: white;
          line-height: 40px;
          text-align: center;
          font-size: 15px;
        }
      }
    }
  }

  .Follow_Menu_more {
    @include rect(300px, 25px);
    text-align: center;
    margin-top: 15px;

    a {
      color: #DD3915;
    }
  }
}